<template>
	<view>
		<drag-box 
		:pos_x="pos_x" 
		:pos_y="pos_y" 
		:start_scale="start_scale" 
		:opa="opa" 
		:drag_able="drag_able"
		:stop_here="stop_here"
		@locationChanged="locationChanged"
		@scaleChanged="scaleChanged"
		>
			<view>
				<view class="gifts-img">
					<view class="left-img"><image style="width: 100%; height: 100%;" :src="!use_user_icon || left == null ? '../../static/nzb.png' : safeGet(left, 'gift_icon', '')"></image></view>
					<view style=" flex: 1;"></view>
					<view class="right-img"><image style="width: 100%; height: 100%;" :src="!use_user_icon || right == null ? '../../static/rqp.png' : safeGet(right, 'gift_icon', '')"></image></view>
				</view>                                                                                                                                                                                                                                                                                                                                        
				<blood :left_num="safeGet(left, 'user_cpt_temp.coins', 0)" :right_num="safeGet(right, 'user_cpt_temp.coins', 0)"/>
				<view class="blood-info">
					<view class="left_info">
						<view class="streak st_left">
							<view class="ci-su">{{safeGet(left, 'user_cpt_temp.win_count', 0)}}</view>
							<view class="ls">连胜</view>
						</view>
						<view class="l-info">
							<view class="gifts"><image style="width: 100%; height: 100%;" :src="safeGet(left, 'header', example ? '/static/tx.jpg' : '')"></image></view>
							<view class="name">{{safeGet(left, 'nick_name', '左边')}}</view>
						</view>
					</view>
					<view class="time">
						{{over_time_str}}
					</view>
					<view class="right_info">
						<view class="r-info">
							<view class="gifts gi_right"><image style="width: 100%; height: 100%;" :src="safeGet(right, 'header', example ? '/static/tx1.jpg' : '')"></view>
							<view class="name">{{safeGet(right, 'nick_name', '右边')}}</view>
						</view>
						<view class="streak">
							<view class="ci-su">{{safeGet(right, 'user_cpt_temp.win_count', 0)}}</view>
							<view class="ls">连胜</view>
						</view>
					</view>
				</view>
			</view>
		</drag-box>
	</view>
</template>

<script>
	
	import dragBox from '@/components/drag-box/drag-box.vue'
	import blood from '@/components/blood/blood.vue'
	import { safeGet } from '@/safeGet'
	
	export default {
		name:"blood-bar",
		components: {
			dragBox,
			blood
		},
		props: {
			pos_x: { type: Number, default: 0 },
			pos_y: { type: Number, default: 0 },
			start_scale: { type: Number, default: 1 },
			opa: { type: Number, default: 1 },
			drag_able: { type: Boolean, default: true},
			stop_here: { type: Boolean, default: false},
			cpt_id: {
				type: Number,
				default: 0
			},
			use_user_icon: {
				type: Boolean,
				default: false
			},
			example: {
				type: Boolean,
				default: false
			},
			over_time: { type: Number, default: 0 }
		},
		data() {
			return {
				over_time_str: '00:00',
				left: null,
				right: null
			};
		},
		watch: {
			over_time(newVal) {
				this.over_time_str = this.formatTime(newVal)
			}
		},
		created() {
			this.over_time_str = this.formatTime(this.over_time)
			this.configData()
			window.electronAPI.noticeUserCptTempChanged((from) => {
				if (from != 'blood-bar') {
					this.configData()
				}
			})
		},
		
		beforeDestroy() {
			window.electronAPI.removeNoticeUserCptTempChanged()
		},
		
		methods: {
			safeGet,
			locationChanged(location) {
				this.$emit('locationChanged', location)
			},
			scaleChanged(scale) {
				this.$emit('scaleChanged', scale)
			},
			
			configData() {
				window.electronAPI.userList('blood_bar_user_temp', this.cpt_id).then((users) => {
					let ctres = []
					this.left = null
					this.right = null
					for (let user of users) {
						if (user.user_cpt_temp && user.user_cpt_temp.position == 1) {
							if (user.show == 1) {
								this.left = user
							} else {
								this.left = null
							}
						}
						if (user.user_cpt_temp && user.user_cpt_temp.position == 2) {
							if (user.show == 1) {
								this.right = user
							} else {
								this.right = null
							}
						}
					}
				})
			},
			
			formatTime(seconds) {
				const mins = Math.floor(seconds / 60);
				const secs = seconds % 60;
				const pad = n => n.toString().padStart(2, '0');
				return `${pad(mins)}:${pad(secs)}`;
			}
		}
	}
</script>

<style scoped>
	
	.blood-info {
		 display: flex;
		 margin-top: 10px;
		 height: 40px;
	}
	
	.left_info { 
		width: 40%;
		display: flex;
	 }
	 
	.streak { 
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		transform: skewX(-4deg);
		text-align: center;
		color: #f7c34a;
	}
	
	.st_left {
		transform: skewX(4deg);
	}
	
	.ci-su {
		
		font-size: 20px;
		line-height: 1;
	}
	
	.ls {
		font-size: 12px;
		line-height: 1;
		padding-top: 2px;
	}
	
	.l-info {
		width: 80%;
		display: flex;
		background: linear-gradient(to right, 
		    rgba(253, 43, 116, 0),  /* 完全透明 */
		    rgba(253, 43, 116, 0.6)   /* 完全不透明 */
		);
		align-items: center;
		border-radius:0 50px 50px 0;
		direction: rtl; 
		height: 47px;
	}
	
	.gifts {
		width: 35px;
		height: 35px;
		border-radius: 30px;
		overflow: hidden;
		margin: 0 5px 0 5px;
		border: 2px solid #fff;
		background-color: #fff;
	}
	
	.gi_right {
		margin: 0 5px 0 5px;
	}

	.right_info {
		width: 40%;
		display: flex;
		height: 47px;
	}
	
	.time { 
		display: flex;
		flex: 1;
		align-items: center; 
		justify-content: center;
		color: #fff;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
	}
	
	.r-info {
		width: 80%;
		display: flex;
		background: linear-gradient(to right, 
		    rgba(61, 162, 254, 0.6),  /* 完全透明 */
		    rgba(61, 162, 254, 0)   /* 完全不透明 */
		  );
		  align-items: center;
		  border-radius:50px 0 0 50px;
	}
	
	.name {
		color: #fff;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
		max-width: 5em;  /* 6个汉字的近似宽度 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0 3px;
	}
	
	.gifts-img { 
		width: 100%;
		display: flex;
		flex-direction: row;
	}
	
	.left-img {
		width: 40px;
		height: 40px;
	}
	
	.right-img {
		width: 40px;
		height: 40px;
	}
	
</style>